.card {
  display: grid;
  grid-template: auto / 10em auto 15em;
  grid-template-areas:
    "le lo da"
    "me me me"
    "pr .. ma";
  border: #444444 solid 1px;
  background: #333;
  margin-bottom: var(--margin);
  align-items: baseline;

  div {
    padding: 0 var(--padding) 0 var(--padding);
    align-self: center;
  }
}

.card-trace {
  display: var(--log-visible-trace, grid);
  
  .level {
    background: var(--log-color-trace);
  }  
}

.card-debug {
  display: var(--log-visible-debug, grid);
  
  .level {
    background: var(--log-color-debug);
  }
}

.card-info {
  display: var(--log-visible-info, grid);

  .level {
    background: var(--log-color-info);
  }
}

.card-warn {
  display: var(--log-visible-warn, grid);

  .level {
    background: var(--log-color-warn);
  }
}

.card-error {
  display: var(--log-visible-error, grid);

  .level {
    background: var(--log-color-error);
  }
}

.card-fatal {
  display: var(--log-visible-fatal, grid);

  .level {
    background: var(--log-color-fatal);
  }
}

.level {
  grid-area: le;
  text-align: center;
}

.logger {
  grid-area: lo;
  font-size: 0.8em;
}

.date {
  grid-area: da;
  text-align: end;
  font-size: 0.8em;
}

.message {
  grid-area: me;
  background: var(--bgcolor);

  pre {
    margin: var(--margin);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8em;
  }
}

.processname {
  grid-area: pr;
  font-size: 0.6em;
}

.machinename {
  grid-area: ma;
  font-size: 0.5em;
  text-align: end;
}

